<template>
  <div
    class="btn-bg"
    :style="changeStyle"
    @mouseover="itemHover"
    @mouseout="removeHover"
  >
    <div class="btn-title">{{title}}</div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      isHover: false,
    }
  },
  props: {
    normalImg: {
      type: String,
      default: '',
    },
    hoverImg: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  },
  computed: {
    changeStyle () {
      return {
        backgroundImage:
          'url(' +
          require(`@/assets/${
            !this.isHover ? this.normalImg : this.hoverImg
          }`) +
          ')',
      }
    },
  },
  mounted () {
  },
  methods: {
    itemHover () {
      this.isHover = true
    },
    removeHover () {
      this.isHover = false
    },
  },
}
</script>

<style scoped>
  .btn-bg {
    width: 25rem;
    height: 22rem;
    background-position: left top;
    background-size: 100% 100%;
    transition: all 500ms;
    cursor: pointer;
    animation: moveUpDown 5s ease infinite;
    position: relative;
  }

  .btn-title {
    position: absolute;
    bottom: -2rem;
    width: 25rem;
    text-align: center;
    color: #00baf1;
    font-size: 2rem;
  }

  @keyframes moveUpDown {
    0% {
      transform: translate(0px, -20px);
    }
    50% {
      transform: translate(0px, 20px);
    }
    100% {
      transform: translate(0px, -20px);
    }
  }
</style>
